<template>
  <el-button type="primary" circle class="publish-talk-btn" @click="showDialog = true">
    <el-icon style="font-size: 28px;">
      <Plus />
    </el-icon>
  </el-button>
  <!-- 发表说说弹窗 -->
  <el-dialog v-model="showDialog" width="540px" :close-on-click-modal="false" class="publish-dialog" align-center
    destroy-on-close>
    <Comment showImage @submit="handlePublish" />
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import Comment from './comment.vue'
import { publishTalk } from '@/service/module/talk'
const showDialog = ref(false)
const emit = defineEmits(['publish'])

const handlePublish = async ({content, imageList} ) => {
  const formData = new FormData()
  formData.append('content', content)
  imageList.forEach(item => {
    formData.append('images', item.raw)
  })
  const res = await publishTalk(formData)
  emit('publish')
  showDialog.value = false
  ElMessage.success('发表成功')
  console.log(res)
  // publishing.value = true
  // let imageUrls = []
  // if (imageList.value.length) {
  //   imageUrls = await uploadImages(imageList.value)
  // }
  // await publishTalk({ content: publishContent.value, images: imageUrls })
  // ElMessage.success('发表成功（请接入接口）')
  // publishContent.value = ''
  // imageList.value = []
  // showDialog.value = false
  // publishing.value = false
  // 你可以在这里
  // 刷新说说列表
}


</script>

<style lang="scss" scoped>
.publish-talk-btn {
  position: fixed;
  right: 32px;
  top:60vh;
  // bottom: 48px;
  z-index: 999;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  box-shadow: 0 6px 24px #8ec5fc55, 0 1.5px 8px #fff3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #8ec5fc 0%, #e0c3fc 100%);
  transition: box-shadow 0.2s, transform 0.2s;

  &:hover {
    box-shadow: 0 12px 32px #8ec5fc99, 0 2px 12px #fff6;
    transform: translateY(-4px) scale(1.08);
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
  }
}

.publish-dialog {
  padding: 30px;
  // background: transparent;
}


</style>